import React, { useEffect, useState, useRef } from 'react'
import axios from 'axios'
import { log } from 'console';

const Effect = () => {
  type ItemObj = {
    id: number, name: string
  }
  // const [list, setList] = useState([{ id: 1, name: 'test' }])
  // const [list, setList] = useState<any[]>([])
  const [list, setList] = useState<ItemObj[]>([])
  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get('http://geek.itheima.net/v1_0/channels')
      console.log(res, 88);
      setList(res.data.data.channels)

    }
    fetchData()
  }, [])
  /* useState */

  const ref = useRef<HTMLInputElement>(null)
  const changeHandle = () => {
    console.log(ref.current?.value, 88);

  }

  return <div>
    御剑乘风来,除魔天地间!==Effect
    <input type="text" ref={ref} onChange={changeHandle} />
    <button>非受控组件获取input的值</button>
    <ul>
      {list.map(item => {
        return <li key={item.id}>{item.name}</li>
      })}
    </ul>
  </div>
};
export default Effect